<template>
  <div class="about">
    <h1>This is an about page</h1>
    <hr />
    <!-- $store 直接挂载在 vue3 实列上 -->
    <h1>{{ $store.state.count }}</h1>
    <button @click="$store.state.count++">错误更改</button>
    <hr />
    <!-- 通过 hook 获取 -->
    <h2>{{ store.state.count }}</h2>
    <hr />
    <h3>{{ aCount }}/{{ bCount }}/{{ cCount }}/{{ dCount }}</h3>
    <hr />
    <h3>计算属性：{{ store.getters.double }}</h3>
    <button @click="add">同步增加</button>
    <button @click="asyncAdd">异步增加</button>
    <button @click="AAdd">aCount同步增加</button>
    <button @click="BAdd">bCount同步增加</button>
    <button @click="asyncAAdd">aCount异步增加</button>
    <button @click="asyncBAdd">bCount异步增加</button>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "@/vuex";
const store = useStore();
console.log(store);
const add = () => {
  store.commit("ADD", 1); // commit 提交同步 mutation 更新状态
};
const asyncAdd = () => {
  store.dispatch("asyncAdd", 2).then((res) => console.log(res, "ok")); // dispatch 派发异步 actions 更新状态
};

const aCount = computed(() => store.state.aModule.count);
const bCount = computed(() => store.state.bModule.count);
const cCount = computed(() => store.state.aModule.cModule.count);
const dCount = computed(() => store.state.aModule.dModule.count);

const AAdd = () => {
  store.commit("aModule/ADD", 2);
};
const BAdd = () => {
  store.commit("bModule/ADD", 3);
};
const asyncAAdd = () => {
  store.dispatch("aModule/asyncAdd", 4);
};
const asyncBAdd = () => {
  store.dispatch("bModule/asyncAdd", 5);
};
</script>
